<template>
  <div class="h-full flex">
    <div class="w-[17.5rem] px-4 border-r border-[#e5e6eb]">
      <Tree searchPlaceholder="请输入任务名称" @updateCurrent="updateCurrent" />
    </div>
    <div class="flex-1">
      <div class="px-6 py-4">
        巡视点位名称：
        <a-select
          class="w-[18rem]"
          v-model:value="searchForm.patrolPointName"
          allow-clear
          @change="handleSelectChange"
          placeholder="请选择巡视点名称"
          :options="selectList"
          :fieldNames="{
            value: 'patrolPointName',
            label: 'patrolPointName'
          }"
        />
      </div>
      <div class="px-6 h-[calc(100%-4.5rem)]">
        <div class="grid grid-cols-12">
          <div class="col-span-4 mb-2 text-[#4E5969]">
            图像分割时间:
            <span class="ml-2 text-[#1D2129]">{{ resultData.seqTime }}</span>
          </div>
          <div class="col-span-8 mb-2 text-[#4E5969]">
            分割元件类型数量:
            <span class="ml-2 text-[#1D2129]">{{ resultData.typeNum }}</span>
          </div>
          <div class="col-span-4 mb-3 text-[#4E5969]">
            分割元件类型:
            <span class="ml-2 text-[#1D2129]">{{ resultData.typeName }}</span>
          </div>
          <div class="col-span-8 mb-3 text-[#4E5969]">
            分割元件名称:
            <span class="ml-2 text-[#1D2129]">{{ resultData.deviceName }}</span>
          </div>
        </div>
        <div class="flex">
          <div class="flex-1 text-center">
            <a-spin
              tip="正在加载..."
              :spinning="loading"
              style="min-height: 14rem"
            >
              <a-image
                v-if="resultData.imagePath"
                height="34rem"
                :src="resultData.imagePath"
              />
            </a-spin>
          </div>
          <div class="flex-1 ml-4 text-center">
            <a-spin
              tip="正在加载..."
              :spinning="unloading"
              style="min-height: 14rem"
            >
              <a-image v-if="unripPath" height="34rem" :src="unripPath" />
              <empty v-if="!unripPath && !unloading" description="暂无分割" />
            </a-spin>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import Tree from '@/components/tree/SearchTree.vue'
import { loadPoint, loadResult } from './serve.api'
import { unpick, frame } from '@/utils/grap'

const selectList = ref([])
const searchForm = reactive({
  jobId: '',
  patrolPointName: undefined
})

const loading = ref(false)
const unloading = ref(false)

const unripPath = ref() // 分割图片路径

const resultData = reactive({
  seqTime: '',
  typeNum: '',
  typeName: '',
  deviceName: '',
  imagePath: ''
})

function handleSelectChange(value, options) {
  searchForm.jobId = options?.jobId

  unripPath.value = ''
  resultData.imagePath = ''
  loading.value = true
  unloading.value = true

  loadResult({
    jobId: options.jobId,
    patrolPointName: options.patrolPointName
  }).then((res) => {
    resultData.seqTime = res.seqTime
    resultData.typeNum = res.typeNum
    resultData.typeName = res.typeName
    resultData.deviceName = res.deviceName

    const { imagePath, maskImagePath, resultDetailList } = res

    // TODO 先通过分割，再去画框(有效避免分割图覆盖框)
    if (maskImagePath && resultDetailList.length !== 0) {
      unpick(imagePath, maskImagePath, resultDetailList).then((x) => {
        frame(x, resultDetailList).then((y) => {
          unripPath.value = y
          unloading.value = false

          resultData.imagePath = imagePath
          loading.value = false
        })
      })
    } else {
      resultData.imagePath = imagePath
      unloading.value = false
      loading.value = false
    }
  })
}

async function loadPointFun(item) {
  loadPoint({
    jobName: item.parentName,
    deviceName: item.name
  }).then((res) => {
    selectList.value = res

    // 要赋值
    if (res.length !== 0) {
      searchForm.patrolPointName = res[0].patrolPointName
      handleSelectChange(searchForm.patrolPointName, res[0])
    }
  })
}

const isFirst = ref(true)
const updateCurrent = (item) => {
  if (isFirst.value) {
    if (item && item.children.length !== 0) {
      loadPointFun(item.children[0])
    }
    isFirst.value = false
  } else {
    if (item.children.length !== 0) return
    loadPointFun(item)
  }
}
</script>
